<template>
    <div class="container">
        <el-card shadow="hover" style="padding:0">
            <el-upload
                list-type="picture-card"
                :action="url"
                :on-success="handleSuccess"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :headers="headers"
                :file-list="fileList"
                multiple
                class="upload">
                <i class="el-icon-plus"></i>
                <el-dialog :visible.sync="dialogVisiblePreview">
                    <img width="100%" :src="previewUrl" alt="">
                </el-dialog>
            </el-upload>
            
        </el-card>


        <!-- <div class="wrapper">
            <div class="box"></div>
        </div> -->
    </div>
</template>

<script>
import { created, deleted, updated, selectOne, selectPage } from "@/api/admin/sysfile"
import { getToken } from "@/libs/auth"
export default {
    name: "Upload",
    data() {
        return {
            url: '',
            headers: {},
            fileList: [],
            previewUrl: '',
            dialogVisiblePreview: false,
        }
    },
    mounted () {
        this.$nextTick(function() {
            this.url = process.env.VUE_APP_BASE_SERVICE_URL + '/system/file/upload'
            this.headers = { 'Auth-Token': getToken() }
        })
    },
    methods: {
        handleSuccess(response, file, fileList) {
            this.fileList = fileList
        },
        handleRemove(file, fileList) {
            this.fileList = fileList
            deleted({ idList: [file.response.data.id] }).then(res => {
                console.log(res);
            })
        },
        handlePreview(file) {
            this.previewUrl = file.url;
            this.dialogVisiblePreview = true;
        },
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
// .wrapper{
//     border:1px solid red;
//     position: absolute;
//     top:0;
//     left: 0;
//     right: 0;
//     bottom: 0;
//     .box{
//         border:1px solid blue;
//         height: calc(100% - 300px);
//     }
// }
</style>